import React from 'react';
import {deepCompare2Object} from '../../../helpers/utils'
import {SET_EVENT_FILTER_CHECKED} from '../../../redux/constants/events'
import EventFilterCheckbox from './EventFilterCheckbox';

class EventFilterItem extends React.Component {
  itemHeight = 30

  constructor(props) {
    super(props);
    this.state = {
      hidden: true,
      buttonText: 'Показать еще',
      height: this.props.maxValue ? this.props.maxValue * this.itemHeight : 150
    }
  }

  componentDidMount() {
    if(this.props.showMore) this.props.showMore(this.props.maxValue || 5, this.props.typeFilter)
  }

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    return !deepCompare2Object(this.props, nextProps) || !deepCompare2Object(this.state, nextState)
  }

  handleClick = (count, type) => {
    this.setState({
      hidden: !this.state.hidden,
      buttonText: !this.state.hidden ? 'Показать еще' : 'Скрыть',
    })
    if(this.state.hidden && this.state.height < 235) {
      this.setState({height: 235})
    } else if(this.state.height === 235) {
      this.setState({height: this.props.maxValue ? this.props.maxValue * 30 : 150})
    }
    if(this.props.filterData.data.length !== count && this.state.hidden) this.props.showMore(count, type)
  }

  render() {
    const { typeFilter, filterData, userFilterData, setChecked, maxValue = 5, title = '' } = this.props;
    let areMore = 0
    const checkboxSmall = [];
    const checkboxBig = [];
    const meta = filterData ? filterData.meta.pagination : ''
    const dataLength = filterData ? filterData.data.length : 0
    if(meta) areMore = meta.total - maxValue

    filterData && filterData.data.forEach((item, index) => {
      if(index < maxValue) {
        checkboxSmall.push(
          <EventFilterCheckbox
            typeFilter={typeFilter}
            key={item.id}
            data={item}
            userFilterData={userFilterData}
            setChecked={setChecked}
            typeCheck={SET_EVENT_FILTER_CHECKED}
          />
        )
      } else {
        checkboxBig.push(
          <EventFilterCheckbox
            typeFilter={typeFilter}
            key={item.id}
            data={item}
            userFilterData={userFilterData}
            setChecked={setChecked}
            typeCheck={SET_EVENT_FILTER_CHECKED}
          />
        )
      }
    })

    return (
      <React.Fragment>
        <div className="multi-range-title pb-75">
          <h6 className="filter-title mb-0">{title}</h6>
        </div>
        <div className={`check-event-filter ${areMore ? 'event-filter__scroller-container' : 'filter-item-container'}`}>
          <div
            className={`event-filter__items ${areMore > 0 ? 'event-filter__scroller' : ''}`}
            style={{
              height: `${dataLength < maxValue ? dataLength * this.itemHeight : this.state.height}px`
            }}
          >
            <div>{checkboxSmall}</div>
            <div hidden={this.state.hidden}>{checkboxBig}</div>
          </div>
          {
            areMore > 0 ? <span onClick={() => this.handleClick(meta.total, typeFilter)} className="event-filter__item-button">
              {this.state.buttonText} {this.state.hidden && areMore > 0 ? areMore : ''}
          </span> : ''
          }
        </div>
        <hr/>
      </React.Fragment>
    )
  }
}

export default EventFilterItem;
